<template>
  <div class="goods-item">
    <a href="#" class="img-box">
      <img class="img" :src="goods.image" alt="" />
    </a>
    <div>
      <a :href="goods.url" class="a"> {{ goods.name }}</a>
    </div>
    <div>￥ {{ goods.price }}</div>
    <div class="company">
      <a :href="goods.url" class="a">{{ goods.company }}</a>
    </div>
  </div>
</template>
<script lang="ts" setup>
defineProps<{
  goods: object;
}>();
</script>
<style lang="scss" scoped>
.goods-item {
  background: #fff;
  text-align: left;
  padding: 0.5em;
  .img-box {
    text-align: center;
    display: block;
    .img {
      aspect-ratio: 1/1;
      width: 180px;
      min-width: 0;
    }
  }
  .company {
    color: #999;
  }
  .company:hover {
    color: rgb(228, 57, 57);
  }
}
</style>